<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Kotlin Playground examples</title>
  <link rel="stylesheet" href="examples.css">
  <link rel="stylesheet" href="examples-highlight.css">
  <style>
  .markdown-body {
		max-width: 980px;
		margin: 50px auto;
	}
  </style>
  <script src="https://unpkg.com/kotlin-playground@1" data-selector=".kotlin-code"></script>
</head>
<body class="markdown-body">
<h1>Kotlin Playground demo</h1>
<h2>Automatic initialization</h2>
<p>Insert a <code>&lt;script&gt;</code> element into your page and specify what elements should be converted in its <code>data-selector</code> attribute.</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/kotlin-playground@1"</span> <span class="hljs-attr">data-selector</span>=<span class="hljs-string">".kotlin-code"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<p>For instance following block of Kotlin code:</p>
<pre><code class="hljs language-txt">class Contact(val id: Int, var email: String)

fun main(args: Array&lt;String&gt;) {
    val contact = Contact(1, &quot;mary@gmail.com&quot;)
    println(contact.id)
}
</code></pre>
<p>Turns into:</p>
<div class="kotlin-code">
<pre><code class="hljs language-kotlin"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Contact</span></span>(<span class="hljs-keyword">val</span> id: <span class="hljs-built_in">Int</span>, <span class="hljs-keyword">var</span> email: String)

<span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">main</span><span class="hljs-params">(args: <span class="hljs-type">Array</span>&lt;<span class="hljs-type">String</span>&gt;)</span></span> {
    <span class="hljs-keyword">val</span> contact = Contact(<span class="hljs-number">1</span>, <span class="hljs-string">"mary@gmail.com"</span>)
    println(contact.id)
}
</code></pre>
</div>
<p>You can also change the playground theme or disable run button using <code>theme</code> and <code>data-highlight-only</code> attributes.</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"kotlin-code"</span> <span class="hljs-attr">theme</span>=<span class="hljs-string">"idea"</span> <span class="hljs-attr">data-highlight-only</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
<div class="kotlin-code" data-highlight-only theme="idea">
<pre><code class="hljs language-kotlin"><span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">main</span><span class="hljs-params">(args: <span class="hljs-type">Array</span>&lt;<span class="hljs-type">String</span>&gt;)</span></span> {
    println(<span class="hljs-string">"Hello World!"</span>)
}
</code></pre>
</div>
<p>Or theme <code>darcula</code></p>
<div class="kotlin-code" data-highlight-only theme="darcula">
<pre><code class="hljs language-kotlin"><span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">main</span><span class="hljs-params">(args: <span class="hljs-type">Array</span>&lt;<span class="hljs-type">String</span>&gt;)</span></span> {
    println(<span class="hljs-string">"Hello World!"</span>)
}
</code></pre>
</div>
<p>Set another target platform with attribute <code>data-target-platform</code>.</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"kotlin-code"</span> <span class="hljs-attr">data-target-platform</span>=<span class="hljs-string">"js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
<div class="kotlin-code" data-target-platform="js">
<pre><code class="hljs language-kotlin"><span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">sum</span><span class="hljs-params">(a: <span class="hljs-type">Int</span>, b: <span class="hljs-type">Int</span>)</span></span>: <span class="hljs-built_in">Int</span> {
    <span class="hljs-keyword">return</span> a + b
}

<span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">main</span><span class="hljs-params">(args: <span class="hljs-type">Array</span>&lt;<span class="hljs-type">String</span>&gt;)</span></span> {
    print(sum(-<span class="hljs-number">1</span>, <span class="hljs-number">8</span>))
}
</code></pre>
</div>
<p>You can use JS IR compiler also.</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"kotlin-code"</span> <span class="hljs-attr">data-target-platform</span>=<span class="hljs-string">"js-ir"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
<div class="kotlin-code" data-target-platform="js-ir">
<pre><code class="hljs language-kotlin"><span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">mul</span><span class="hljs-params">(a: <span class="hljs-type">Int</span>, b: <span class="hljs-type">Int</span>)</span></span>: <span class="hljs-built_in">Int</span> {
    <span class="hljs-keyword">return</span> a * b
}

<span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">main</span><span class="hljs-params">(args: <span class="hljs-type">Array</span>&lt;<span class="hljs-type">String</span>&gt;)</span></span> {
    print(mul(-<span class="hljs-number">2</span>, <span class="hljs-number">4</span>))
}
</code></pre>
</div>
<p>You can use Wasm compiler.</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"kotlin-code"</span> <span class="hljs-attr">data-target-platform</span>=<span class="hljs-string">"wasm"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
<div class="kotlin-code" data-target-platform="wasm">
<pre><code class="hljs language-kotlin"><span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">mul</span><span class="hljs-params">(a: <span class="hljs-type">Int</span>, b: <span class="hljs-type">Int</span>)</span></span>: <span class="hljs-built_in">Int</span> {
    <span class="hljs-keyword">return</span> a * b
}

<span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">main</span><span class="hljs-params">(args: <span class="hljs-type">Array</span>&lt;<span class="hljs-type">String</span>&gt;)</span></span> {
    print(mul(-<span class="hljs-number">2</span>, <span class="hljs-number">4</span>))
}
</code></pre>
</div>
<p>Use <code>data-target-platform</code> attribute with value <code>junit</code> for creating examples with tests:</p>
<div class="kotlin-code" data-target-platform="junit">
<pre><code class="hljs language-kotlin"><span class="hljs-keyword">import</span> org.junit.Test
<span class="hljs-keyword">import</span> org.junit.Assert

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">TestExtensionFunctions</span></span>() {
    <span class="hljs-meta">@Test</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">testIntExtension</span><span class="hljs-params">()</span></span> {
        Assert.assertEquals(<span class="hljs-string">"Rational number creation error: "</span>, RationalNumber(<span class="hljs-number">4</span>, <span class="hljs-number">1</span>), <span class="hljs-number">4</span>.r())
    }

    <span class="hljs-meta">@Test</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">testPairExtension</span><span class="hljs-params">()</span></span> {
        Assert.assertEquals(<span class="hljs-string">"Rational number creation error: "</span>, RationalNumber(<span class="hljs-number">2</span>, <span class="hljs-number">3</span>), Pair(<span class="hljs-number">2</span>, <span class="hljs-number">3</span>).r())
    }
}
<span class="hljs-comment">//sampleStart</span>
<span class="hljs-comment">/*
Then implement extension functions Int.r() and Pair.r() and make them convert Int and Pair to RationalNumber.
*/</span>
<span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-built_in">Int</span>.<span class="hljs-title">r</span><span class="hljs-params">()</span></span>: RationalNumber = RationalNumber(<span class="hljs-keyword">this</span>, <span class="hljs-number">2</span>)
<span class="hljs-function"><span class="hljs-keyword">fun</span> Pair<span class="hljs-type">&lt;Int, Int&gt;</span>.<span class="hljs-title">r</span><span class="hljs-params">()</span></span>: RationalNumber = RationalNumber(first, second)

<span class="hljs-keyword">data</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">RationalNumber</span></span>(<span class="hljs-keyword">val</span> numerator: <span class="hljs-built_in">Int</span>, <span class="hljs-keyword">val</span> denominator: <span class="hljs-built_in">Int</span>)
<span class="hljs-comment">//sampleEnd</span>
</code></pre>
</div>
<p>If you want to hide test classes in you code snippet just set the attribute <code>folded-button</code> to <code>false</code> value.</p>
<p>Also you can mark arbitrary code by putting it between <code>[mark]your code[/mark]</code>.</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"kotlin-code"</span> <span class="hljs-attr">data-target-platform</span>=<span class="hljs-string">"junit"</span> <span class="hljs-attr">folded-button</span>=<span class="hljs-string">"false"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
<div class="kotlin-code" data-target-platform="junit" folded-button="false">
<pre><code class="hljs language-kotlin"><span class="hljs-keyword">import</span> org.junit.Test
<span class="hljs-keyword">import</span> org.junit.Assert

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">TestLambdas</span></span>() {
    <span class="hljs-meta">@Test</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">contains</span><span class="hljs-params">()</span></span> {
        Assert.assertTrue(<span class="hljs-string">"The result should be true if the collection contains an even number"</span>,
                          containsEven(listOf(<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">126</span>, <span class="hljs-number">555</span>)))
    }

    <span class="hljs-meta">@Test</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">notContains</span><span class="hljs-params">()</span></span> {
        Assert.assertFalse(<span class="hljs-string">"The result should be false if the collection doesn't contain an even number"</span>,
                           containsEven(listOf(<span class="hljs-number">43</span>, <span class="hljs-number">33</span>)))
    }
}
<span class="hljs-comment">//sampleStart</span>
<span class="hljs-comment">/*
Pass a lambda to any function to check if the collection contains an even number.
The function any gets a predicate as an argument and returns true if there is at least one element satisfying the predicate.
*/</span>
<span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">containsEven</span><span class="hljs-params">(collection: <span class="hljs-type">Collection</span>&lt;<span class="hljs-type">Int</span>&gt;)</span></span>: <span class="hljs-built_in">Boolean</span> = collection.any {[mark]TODO()[/mark]}
<span class="hljs-comment">//sampleEnd</span>
</code></pre>
</div>
<p>Use <code>data-target-platform</code> attribute with value <code>canvas</code> for working with canvas in Kotlin:</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"kotlin-code"</span> <span class="hljs-attr">data-target-platform</span>=<span class="hljs-string">"canvas"</span> <span class="hljs-attr">data-output-height</span>=<span class="hljs-string">"200"</span>&gt;</span>
</code></pre>
<div class="kotlin-code" data-target-platform="canvas" data-output-height="200">
<pre><code class="hljs language-kotlin"><span class="hljs-keyword">package</span> fancylines


<span class="hljs-keyword">import</span> jquery.*
<span class="hljs-keyword">import</span> org.w3c.dom.CanvasRenderingContext2D
<span class="hljs-keyword">import</span> org.w3c.dom.HTMLCanvasElement
<span class="hljs-keyword">import</span> kotlinx.browser.document
<span class="hljs-keyword">import</span> kotlinx.browser.window
<span class="hljs-keyword">import</span> kotlin.js.Math



<span class="hljs-keyword">val</span> canvas = initalizeCanvas()
<span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">initalizeCanvas</span><span class="hljs-params">()</span></span>: HTMLCanvasElement {
    <span class="hljs-keyword">val</span> canvas = document.createElement(<span class="hljs-string">"canvas"</span>) <span class="hljs-keyword">as</span> HTMLCanvasElement
    <span class="hljs-keyword">val</span> context = canvas.getContext(<span class="hljs-string">"2d"</span>) <span class="hljs-keyword">as</span> CanvasRenderingContext2D
    context.canvas.width  = window.innerWidth.toInt();
    context.canvas.height = window.innerHeight.toInt();
    document.body!!.appendChild(canvas)
    <span class="hljs-keyword">return</span> canvas
}

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">FancyLines</span></span>() {
    <span class="hljs-keyword">val</span> context = canvas.getContext(<span class="hljs-string">"2d"</span>) <span class="hljs-keyword">as</span> CanvasRenderingContext2D
    <span class="hljs-keyword">val</span> height = canvas.height
    <span class="hljs-keyword">val</span> width = canvas.width
    <span class="hljs-keyword">var</span> x = width * Math.random()
    <span class="hljs-keyword">var</span> y = height * Math.random()
    <span class="hljs-keyword">var</span> hue = <span class="hljs-number">0</span>;

    <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">line</span><span class="hljs-params">()</span></span> {
        context.save();

        context.beginPath();

        context.lineWidth = <span class="hljs-number">20.0</span> * Math.random();
        context.moveTo(x, y);

        x = width * Math.random();
        y = height * Math.random();

        context.bezierCurveTo(width * Math.random(), height * Math.random(),
                width * Math.random(), height * Math.random(), x, y);

        hue += (Math.random() * <span class="hljs-number">10</span>).toInt();

        context.strokeStyle = <span class="hljs-string">"hsl(<span class="hljs-variable">$hue</span>, 50%, 50%)"</span>;

        context.shadowColor = <span class="hljs-string">"white"</span>;
        context.shadowBlur = <span class="hljs-number">10.0</span>;

        context.stroke();

        context.restore();
    }

    <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">blank</span><span class="hljs-params">()</span></span> {
        context.fillStyle = <span class="hljs-string">"rgba(255,255,1,0.1)"</span>;
        context.fillRect(<span class="hljs-number">0.0</span>, <span class="hljs-number">0.0</span>, width.toDouble(), height.toDouble());
    }

    <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">run</span><span class="hljs-params">()</span></span> {
        window.setInterval({ line() }, <span class="hljs-number">40</span>);
        window.setInterval({ blank() }, <span class="hljs-number">100</span>);
    }
}
<span class="hljs-comment">//sampleStart</span>
<span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">main</span><span class="hljs-params">(args: <span class="hljs-type">Array</span>&lt;<span class="hljs-type">String</span>&gt;)</span></span> {
     FancyLines().run()
}
<span class="hljs-comment">//sampleEnd</span>
</code></pre>
</div>
<p>Use <code>data-js-libs</code> with a comma-separated list of URLs to specify additional javascript libraries to load.</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"kotlin-code"</span> <span class="hljs-attr">data-target-platform</span>=<span class="hljs-string">"js"</span> <span class="hljs-attr">data-js-libs</span>=<span class="hljs-string">"https://unpkg.com/moment@2"</span>&gt;</span>
</code></pre>
<div class="kotlin-code" data-target-platform="js" data-js-libs="https://unpkg.com/moment@2">
<pre><code class="hljs language-kotlin"><span class="hljs-keyword">external</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">moment</span><span class="hljs-params">()</span></span>: <span class="hljs-keyword">dynamic</span>

<span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">main</span><span class="hljs-params">()</span></span> {
    <span class="hljs-keyword">val</span> startOfDay = moment().startOf(<span class="hljs-string">"day"</span>).fromNow()
    println(<span class="hljs-string">"The start of the day was <span class="hljs-variable">$startOfDay</span>"</span>)
}
</code></pre>
</div>
<h2>Manual initialization</h2>
<p>If you want to init Kotlin Playground manually - omit <code>data-selector</code> attribute and call it when it's needed:</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/kotlin-playground@1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
<span class="hljs-built_in">document</span>.addEventListener(<span class="hljs-string">'DOMContentLoaded'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
  KotlinPlayground(<span class="hljs-string">'.kotlin-playground'</span>);
});
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<p>Add additional hidden files:
Put your files between <code>&lt;textarea&gt;</code> tag with class <code>hidden-dependency</code>.</p>
<p>Look at example:</p>
<pre><code class="hljs language-html">
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"kotlin-playground"</span>&gt;</span>
  import cat.Cat

  fun main(args: Array<span class="hljs-tag">&lt;<span class="hljs-name">String</span>&gt;</span>) {
  //sampleStart
      val cat = Cat("Kitty")
      println(cat.name)
  //sampleEnd
  }
  <span class="hljs-tag">&lt;<span class="hljs-name">textarea</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hidden-dependency"</span>&gt;</span>
    package cat
    class Cat(val name: String)
  <span class="hljs-tag">&lt;/<span class="hljs-name">textarea</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
<p><button onclick="KotlinPlayground('.kotlin-code-2',{ onChange: (code)=> {console.log(code)}}); this.disabled = true; document.getElementById('kotlin-example').style.display = 'block';">Create</button></p>
<div id="kotlin-example" class="kotlin-code-2" style="display: none;">
<pre><code class="hljs language-text">import cat.Cat

fun main(args: Array&lt;String&gt;) {
//sampleStart
    val cat = Cat(&quot;Kitty&quot;)
    println(cat.name)
//sampleEnd
}
</code></pre>
  <textarea class="hidden-dependency">
    package cat
    class Cat(val name: String)
  </textarea>
</div>
</body>
</html>
